Component({
  /**
   * 声明组件的 prop 属性
   */
  properties: {
    name: String,
    age: {
      //   type: Number, // 数据类型
      optionalTypes: [Number, String], // 数据类型，可以支持多个
      value: 18, // 默认值设置
      // 监听
      observer(newVal, oldVal) {
        console.log("=== 单独监听 age prop 的改变", newVal, oldVal);
      },
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    sex: "男",
    address: {
      city: "深圳市",
      area: "宝安区",
    },
  },

  /**
   * 监听器的操作
   *    1. 如果监听的是 properties 数据，默认会触发一次，而 data 数据不会。
   *    2. 可以同时监听多个数据  'name,age'
   *    3. 可以监听对象的某个属性 'address.city'
   */
  observers: {
    "address.city"(newVal) {
      console.log("=== address 改变了", newVal);
    },
    name(newVal) {
      console.log("=== name 改变了", newVal);
    },

    sex(newVal) {
      console.log("=== sex 改变了", newVal);
    },

    "name,age"(newName, newAge) {
      console.log("=== name 或 age 改变了", newName, newAge);
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onClick() {
      // 触发一个自定义事件 [this.triggerEvent]，通知父组件
      //   console.log("===", this);
      //   this.triggerEvent("change", this.data.name + "~");
      //   this.data.sex = "女";
      //   this.setData({ sex: "女" });
      //   this.setData({
      //     // address: { ...this.data.address, city: "上海市" },
      //     "address.city": "上海市",
      //   });
      this.setData({ age: 20 });
    },
  },

  lifetimes: {
    created() {
      console.log("Hello created");
      // const query = wx.createSelectorQuery();
      // 在自定义组件或包含自定义组件的页面中，推荐使用 this.createSelectorQuery 来代替 wx.createSelectorQuery ，这样可以确保在正确的范围内选择节点。
      // const query = this.createSelectorQuery();
      // query.select("#btn").boundingClientRect((res) => {
      //   console.log("Hello btn 节点信息", res);
      // });
      // // 执行操作
      // query.exec();
    },

    attached() {
      console.log("Hello attached");
      const query = this.createSelectorQuery();
      query.select("#btn").boundingClientRect((res) => {
        console.log("Hello btn 节点信息", res);
      });
      // 执行操作
      query.exec();
    },

    ready() {
      console.log("Hello ready");
    },

    moved() {
      console.log("Hello moved");
    },

    detached() {
      console.log("Hello detached");
    },
  },

  //   lifetimes: {
  //     attached() {
  //       console.log("Hello attached2");
  //       //   console.log("=== attached", this.data, this.properties);
  //       /**
  //        * 要获取 properties 数据，得:
  //        *    1. this.properties.xxx
  //        *    2. this.data.xxx
  //        *
  //        * properties 数据，可以直接修改 [还是不建议]
  //        */
  //       //   this.setData({
  //       //     name: this.data.name + "~",
  //       //   });
  //     },
  //   },
});
